<!doctype html>
<html>
<head th:include="include/fore/foreHeader::html('首页')" ></head>

<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet prefetch" href="css/photoswipe.css">
<link rel="stylesheet prefetch" href="css/default-skin/default-skin.css">


<style>

</style>

<script>
function goPAGE() {
	if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
	}
	else{
		window.location.href="homepage";
	}
}
goPAGE();

var JPos = {};
(function($){
	$.$getAbsPos = function(p){
		var _x = 0;
		var _y = 0;
		while(p.offsetParent){
				_x += p.offsetLeft;
				_y += p.offsetTop;
				p = p.offsetParent;
		}
		
		_x += p.offsetLeft;
		_y += p.offsetTop;
		
		return {x:_x,y:_y};
	};
	
	$.$getMousePos = function(evt){
		var _x,_y;
		evt = evt || window.event;
		if(evt.pageX || evt.pageY){
			_x = evt.pageX;
			_y = evt.pageY;
		}else if(evt.clientX || evt.clientY){
			_x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
			_y = evt.clientY + document.body.scrollTop - document.body.clientTop;
		}else{
			return $.$getAbsPos(evt.target);	
		}
		return {x:_x,y:_y};
	}
})(JPos);
$(function(){
	function getPercentage(bigImage){
		var mPos = JPos.$getMousePos();
		var iPos = JPos.$getAbsPos(bigImage);
		
		window.status = (mPos.x - iPos.x) + " " + (mPos.y - iPos.y);
		var x = (mPos.x - iPos.x);
		var width = $(bigImage).width();
		
		var percentage = 0;
		
		percentage = x*100/width;			
		return percentage;
	}
	function addEventListener(){
		$("div.output").each(function(){
			var width = $(this).width();
			var height = width;
			$(this).height(height);
			
			img =  $(this).children("img");
			var imgWidth = width/3;
			var imgHeight = imgWidth;
			var padding = (width-imgWidth)/2;
			
			img.width(imgWidth);
			img.height(imgHeight);
			img.css("margin-left",padding);
			img.css("margin-top",padding);
			
		});

		$(".homepage-picture-big").mousemove(function(e){
    			var index=$(this).attr("index");
    			var total=$(this).attr("total");
			
    			var percentage = getPercentage(this);
				
				if(percentage<25){
					if(0==index)
						$(this).css("cursor","url('dist/img/small.cur'),auto");
					else
						$(this).css("cursor","url('dist/img/pic_prev.cur'),auto");
				}
				else if(percentage<75){
					$(this).css("cursor","url('dist/img/small.cur'),auto");
				}
				else{
					if(index==total-1)
						$(this).css("cursor","url('dist/img/small.cur'),auto");
					else
    					$(this).css("cursor","url('dist/img/pic_next.cur'),auto");   					
				}
		});

		function showAll(){
			$("div.eachPost").children("div").show();
			$("div.pageDiv").show();    			
		}
		function hideAll(){
			$("div.eachPost").children("div").hide();
			$("div.pageDiv").hide();    			
		}
		$(".homepage-picture-big").click(function(){
			var index=$(this).attr("index");
			index = new Number(index);
			var total=$(this).attr("total");
			var pid=$(this).attr("pid");
			
			var percentage = getPercentage(this);
			
			if(percentage<25){
				if(0==index){
					$(this).fadeOut(0);
					showAll();
				}
				else{
					var img = $(".homepage4mobile-picture-small[pid="+pid+"][index="+(index-1)+"]");
					var middleSrc = img.attr("middleSrc");
					$(this).attr("src",middleSrc);
					$(this).attr("index",index-1);
				}
			}
			else if(percentage<75){
				$(this).fadeOut(0);
				showAll();
			}
			else{
				if(index==total-1){
					$(this).fadeOut(0);
					showAll();						
				}
				else{
					var img = $(".homepage4mobile-picture-small[pid="+pid+"][index="+(index+1)+"]");
					var middleSrc = img.attr("middleSrc");
					$(this).attr("src",middleSrc);
					$(this).attr("index",index+1);
				}
			}
		});
		$(".homepage4mobile-picture-small").click(function(){
			hideAll();
			
			var middleSrc=$(this).attr("middleSrc");
			var pid=$(this).attr("pid");
			var index=$(this).attr("index");
			var total=$(this).attr("total");
			
			var imageBig=$(".homepage-picture-big[pid="+pid+"]");
			var imageSmalls=$(".homepage4mobile-picture-small[pid="+pid+"]");
			
			imageSmalls.removeClass("selectedImage");
			
			$(this).addClass("selectedImage");
			
			imageBig.attr("src",middleSrc);
			imageBig.attr("index",index);
			imageBig.attr("total",total);
			imageBig.fadeIn(500);
			imageBig.parent("div").show();
		});
		
   		$("video").click(function(){
   		    if(this.paused){
   		        this.play();
   		    }else{
   		        this.pause();
   		    }      
   		});	
   		

    	
   	    $("#modal-info").on("hidden.bs.modal",function(){
   	    	$(".videoOnFront")[0].pause();
   	    });
   	    $("#modal-info").on("show.bs.modal",function(){
       	 	if (screenfull.enabled) {
       			screenfull.request($(".videoOnFront")[0]);
       		}
   	    	$(".videoOnFront")[0].play();
   	    });
   	    
   	    $(".small_image").each(function(){
   	    	var width = $(this).width();
   	    	var height = width;
   	    	$(this).height(height);
   	    	
   	    	
   	    	
   	    	console.log(screen.width);
   	    	console.log(screen.height);
   	    	
   	    	var galleryWidth = $(".my-gallery").width();
   	    	
//    	    	$(this).parent("a").attr("data-size",galleryWidth+"x"+galleryWidth);
//    	    	$(this).parent("a").attr("data-size",screen.width+"x"+screen.height);
//    	    	$(this).parent("a").attr("data-size","100%x100%");
   	    	
   	    	
   	    });
   	    
   		var initPhotoSwipeFromDOM = function(gallerySelector) {

   		    // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
   		    // (children of gallerySelector)
   		    var parseThumbnailElements = function(el) {
   		        var thumbElements = el.childNodes,
   		            numNodes = thumbElements.length,
   		            items = [],
   		            figureEl,
   		            linkEl,
   		            size,
   		            item,
   					divEl;

   		        for(var i = 0; i < numNodes; i++) {

   		            figureEl = thumbElements[i]; // <figure> element

   		            // 仅包括元素节点
   		            if(figureEl.nodeType !== 1) {
   		                continue;
   		            }
   					divEl = figureEl.children[0];
   		            linkEl = divEl.children[0]; // <a> element
   					
   		            size = linkEl.getAttribute('data-size').split('x');

   		            // 创建幻灯片对象
   		            item = {
   		                src: linkEl.getAttribute('href'),
   		                w: parseInt(size[0], 10),
   		                h: parseInt(size[1], 10)
   		            };



   		            if(figureEl.children.length > 1) {
   		                // <figcaption> content
   		                item.title = figureEl.children[1].innerHTML; 
   		            }

   		            if(linkEl.children.length > 0) {
   		                // <img> 缩略图节点, 检索缩略图网址
   		                item.msrc = linkEl.children[0].getAttribute('src');
   		            } 

   		            item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
   		            items.push(item);
   		        }

   		        return items;
   		    };

   		    // 查找最近的父节点
   		    var closest = function closest(el, fn) {
   		        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
   		    };

   		    // 当用户点击缩略图触发
   		    var onThumbnailsClick = function(e) {
   		        e = e || window.event;
   		        e.preventDefault ? e.preventDefault() : e.returnValue = false;

   		        var eTarget = e.target || e.srcElement;

   		        // find root element of slide
   		        var clickedListItem = closest(eTarget, function(el) {
   		            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
   		        });

   		        if(!clickedListItem) {
   		            return;
   		        }

   		        // find index of clicked item by looping through all child nodes
   		        // alternatively, you may define index via data- attribute
   		        var clickedGallery = clickedListItem.parentNode,
   		            childNodes = clickedListItem.parentNode.childNodes,
   		            numChildNodes = childNodes.length,
   		            nodeIndex = 0,
   		            index;

   		        for (var i = 0; i < numChildNodes; i++) {
   		            if(childNodes[i].nodeType !== 1) { 
   		                continue; 
   		            }

   		            if(childNodes[i] === clickedListItem) {
   		                index = nodeIndex;
   		                break;
   		            }
   		            nodeIndex++;
   		        }



   		        if(index >= 0) {
   		            // open PhotoSwipe if valid index found
   		            openPhotoSwipe( index, clickedGallery );
   		        }
   		        return false;
   		    };

   		    // parse picture index and gallery index from URL (#&pid=1&gid=2)
   		    var photoswipeParseHash = function() {
   		        var hash = window.location.hash.substring(1),
   		        params = {};

   		        if(hash.length < 5) {
   		            return params;
   		        }

   		        var vars = hash.split('&');
   		        for (var i = 0; i < vars.length; i++) {
   		            if(!vars[i]) {
   		                continue;
   		            }
   		            var pair = vars[i].split('=');  
   		            if(pair.length < 2) {
   		                continue;
   		            }           
   		            params[pair[0]] = pair[1];
   		        }

   		        if(params.gid) {
   		            params.gid = parseInt(params.gid, 10);
   		        }

   		        return params;
   		    };

   		    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
   		        var pswpElement = document.querySelectorAll('.pswp')[0],
   		            gallery,
   		            options,
   		            items;

   		        items = parseThumbnailElements(galleryElement);

   		        // 这里可以定义参数
   		        options = {
   		          barsSize: { 
   		            top: 100,
   		            bottom: 100
   		          }, 
   				   fullscreenEl : true,
//    					shareButtons: [
//    					{id:'wechat', label:'分享微信', url:'#'},
//    					{id:'weibo', label:'新浪微博', url:'#'},
//    					{id:'download', label:'保存图片', url:'{{raw_image_url}}', download:true}
//    					],

   		            // define gallery index (for URL)
   		            galleryUID: galleryElement.getAttribute('data-pswp-uid'),

   		            getThumbBoundsFn: function(index) {
   		                // See Options -> getThumbBoundsFn section of documentation for more info
   		                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
   		                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
   		                    rect = thumbnail.getBoundingClientRect(); 

   		                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
   		            }

   		        };

   		        // PhotoSwipe opened from URL
   		        if(fromURL) {
   		            if(options.galleryPIDs) {
   		                // parse real index when custom PIDs are used 
   		                for(var j = 0; j < items.length; j++) {
   		                    if(items[j].pid == index) {
   		                        options.index = j;
   		                        break;
   		                    }
   		                }
   		            } else {
   		                // in URL indexes start from 1
   		                options.index = parseInt(index, 10) - 1;
   		            }
   		        } else {
   		            options.index = parseInt(index, 10);
   		        }

   		        // exit if index not found
   		        if( isNaN(options.index) ) {
   		            return;
   		        }

   		        if(disableAnimation) {
   		            options.showAnimationDuration = 0;
   		        }

   		        // Pass data to PhotoSwipe and initialize it
   		        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
   		        gallery.init();
   		    };

   		    // loop through all gallery elements and bind events
   		    var galleryElements = document.querySelectorAll( gallerySelector );

   		    for(var i = 0, l = galleryElements.length; i < l; i++) {
   		        galleryElements[i].setAttribute('data-pswp-uid', i+1);
   		        galleryElements[i].onclick = onThumbnailsClick;
   		    }

   		    // Parse URL and open gallery if it contains #&pid=3&gid=1
   		    var hashData = photoswipeParseHash();
   		    if(hashData.pid && hashData.gid) {
   		        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
   		    }
   			};

   			// execute above function
   			initPhotoSwipeFromDOM('.my-gallery');

   			
   			$(".my-gallery>figure>div").each(function(){
   				$(this).height($(this).width());
   			});
   			function more(obj,id) {
   		 		if ($('#txt'+id).is(":hidden")) {
   		 			$('#p'+id).hide();
   		 	 		$('#txt'+id).show();
   		 	 		obj.innerHTML='收起';
   		 		} else {
   		 			$('#p'+id).show();
   		 	 		$('#txt'+id).hide();
   		 	 		obj.innerHTML='全文';
   		 		}
   		 	}   	    
	}
	
    var data4Vue = {
            uri:'homepageData',
            beans: [],
            pagination:{},
            file: null
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content;
                        
                        vue.$nextTick(function(){
                        	addEventListener();
                        });
                    });
                },
                show: function (id) {
                	$("div.output[vid]").show();
                	$("video").each(function(){
                		this.pause();
                		$(this).hide();
                	});
                	var value = 'uploaded/small_video/'+id+'_small.mp4';
//                 	var videoObject = $("#originalVideo");
//                 	videoObject.attr("src",value);

                 	var outputDiv = $("div.output[vid="+id+"]");
                 	outputDiv.hide();
                 	
                 	var videoObject = $("video[vid="+id+"]");
                	videoObject.attr("src",value);
                	videoObject.show();
                	videoObject[0].play();
                	
//                 	alert("screenfull.enabled:"+screenfull.enabled);
		       	 	if (screenfull.enabled) {
		       			screenfull.request(videoObject[0]);
			       		screenfull.on('change', () => {
			       			if(!screenfull.isFullscreen){
			       				var vid = videoObject.attr("vid");
			                 	var outputDiv = $("div.output[vid="+id+"]");
			                 	outputDiv.show();

			                 	videoObject[0].pause();
			       				videoObject.hide();
			       			}
			       		});
		       		}
//                 	videoObject[0].play();
//                 	videoObject.show();
// 			       	videoObject.on("pause",function(){
// 			       		console.log("pause");
// // 			       		videoObject.hide();
			       		
			       		
// 			       		console.log("screen:"+screen);
// 			       		console.log("screen.availHeight:"+screen.availHeight);
// 			       		console.log("screen.height:"+screen.height);
// 			       		console.log("window.innerHeight:"+window.innerHeight);
			       		
// 			       		if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
// 			       			console.log(1);
// 			       		    // browser is almost certainly fullscreen
// // 			       			videoObject.hide();
			       		    
// 			       		}
// 			       		else{
// 			       			console.log(2);
			       			
// 			       		}
// 			       	})
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                }
            }
        });    	

        
        
});


</script>
<body style="background-color: #fff;">
	<div id="workingArea">
		<div id="_contain">
			<div class="banner" style="position: relative;">
				<div class="top_bg"></div>
				<div style="width:80px; height:80px;position: absolute;background-color: #F3F3F7;right: 10px;bottom: -30px;">
					<img src="dist/img/baby.png" style="width:96%; margin: 2%;">
				</div>
				<div class="babyName" style="position: absolute;right: 100px;bottom: 10px;color: white;">
					
				</div>
			</div>
	
			<div class="contain" style="margin: 40px 0 0;">
				<ul>
					<li>
						<template v-for="bean in beans">
							<div class="body">
<!-- 								<div class="logo"> -->
<!-- 									<div class="title">{{bean.title}}</div> -->
<!-- 								</div> -->
								<div class="text">
									<div class="title">
									【{{bean.age}} {{bean.createDate|formatDateFilter}}】
									{{bean.title}}
									</div>
									<div class="txt" style="color:gray;font-size:0.6em">{{bean.text}}</div>
									<!--data-pswp-uid 是每个gallery的id不能重复-->
									
									
									<div v-for="video in bean.videos">
					             		<video :vid="video.id" class="small_video" style="display:none;width:100%"  controls="controls">
										</video>
										<a href="#nowhere"  @click="show(video.id)" data-toggle="modal" data-target="#modal-info">
											<div :vid="video.id" :style="'width:27.88%;float:left;margin:2px;background-size:cover;background-image:url(uploaded/preview/'+video.id+'.jpg)'" class="output">
												<img src="dist/img/ico_play.png">
											</div>
										</a>
			             			</div>	
			             			
			             			<div style="clear:both"></div>
									
									<div class="my-gallery" data-pswp-uid="2">
									

									
										<figure v-for="picture,index in bean.pictures">
											<div>
												<a :href="'uploaded/middlePicture/'+picture.id+'.jpg' " :data-size="picture.width+'x'+picture.height">
													<img style="width:100%;" class="small_image"  :src="'uploaded/middlePicture/'+picture.id+'.jpg' ">
												</a>
											</div>
											<figcaption style="display:none;">{{picture.name}}</figcaption>
										</figure>
										
										
									
										
										
									</div>
									<div class="tm">
										<div class="fl" style="color:gray;font-size:0.6em">{{bean.createDate|formatDateFilter}}</div>
									</div>
<!-- 									<div class="cmt"> -->
<!-- 										<div class="fav"><i class="iconfont">&#xe616;</i>ANTHONY,☆Sanly☆</div> -->
<!-- 										<div><span>ANTHONY：</span>这么先进，和我家的那台一样，打个电话，照样有饭吃，一键式，还带做菜功能，还能洗碗聊天晾衣服</div> -->
<!-- 										<div><span>☆Sanly☆:</span>远程？还有洗米放水功能？</div> -->
<!-- 									</div> -->
								</div>
							</div>
						</template>
					</li>
					
				</ul>
			</div>
			
			<div>
	              	<video class="videoOnFront" id="originalVideo" src="" style="display:none;width:100px" controls="controls">
					</video>
			</div>
			
			<div th:replace="include/fore/forePage::html" ></div>	
			<div th:replace="include/fore/foreFooter::html" ></div>
		</div>
	</div>	
	<!-- Root element of PhotoSwipe. Must have class pswp. -->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	
	    <!-- Background of PhotoSwipe. 
	         It's a separate element as animating opacity is faster than rgba(). -->
	    <div class="pswp__bg"></div>
	
	    <!-- Slides wrapper with overflow:hidden. -->
	    <div class="pswp__scroll-wrap">
	
	        <!-- Container that holds slides. 
	            PhotoSwipe keeps only 3 of them in the DOM to save memory.
	            Don't modify these 3 pswp__item elements, data is added later on. -->
	        <div class="pswp__container">
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	        </div>
	
	        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
	        <div class="pswp__ui pswp__ui--hidden">
	
	            <div class="pswp__top-bar">
	
	                <!--  Controls are self-explanatory. Order can be changed. -->
	
	                <div class="pswp__counter"></div>
	
	                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
	
<!-- 	                <button class="pswp__button pswp__button--share" title="Share"></button> -->
	
	                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
	
<!-- 	                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> -->
	
	                <!-- element will get class pswp__preloader--active when preloader is running -->
	                <div class="pswp__preloader">
	                    <div class="pswp__preloader__icn">
	                      <div class="pswp__preloader__cut">
	                        <div class="pswp__preloader__donut"></div>
	                      </div>
	                    </div>
	                </div>
	            </div>
	
	            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
	                <div class="pswp__share-tooltip"></div> 
	            </div>
	
	            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
	            </button>
	
	            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
	            </button>
	
	            <div class="pswp__caption">
	                <div class="pswp__caption__center"></div>
	            </div>

	        </div>
				
	    </div>
	    
	</div>
	
</body>


</html>
